<template>
  <view class="container">
    <!-- 页面标题 -->
    
    <!-- 接单类型下拉选择器 -->
    <view class="select-container">
      <view class="select-wrapper">
        <text class="select-label">接单类型：</text>
        <picker 
          class="picker-select"
          mode="selector"
          :range="receiveTypes"
          :value="currentReceiveTypeIndex"
          @change="onReceiveTypeChange"
        >
          <view class="picker-content">
            {{ receiveTypes[currentReceiveTypeIndex] }}
            <wd-icon name="arrow-down" size="20px" class="select-icon"></wd-icon>
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 订单列表（cellItem 核心区域） -->
    <view class="order-list">
      <!-- 订单卡片（cellItem） -->
      <view 
        class="order-card" 
        v-for="(order, index) in orders" 
        :key="index"
      >
        <!-- 第一行：订单号和接单状态（statusText已改为接单类型值） -->
        <view class="order-row row1">
          <text class="order-no">订单号：{{ order.orderNo }}</text>
          <!-- 此处statusText已更新为“服务中接单/已完成接单/已退回接单” -->
          <view :class="['status-tag', order.statusClass]">{{ order.statusText }}</view>
        </view>
        
        <!-- 第二行：图片、接单信息和金额 -->
        <view class="order-row row2">
          <view class="product-image">
            <image :src="order.productImage" mode="aspectFill"></image>
          </view>
          
          <view class="receive-info">
            <text class="receive-name">{{ order.receiveName }}</text>
            <text class="receive-model">{{ order.receiveModel }}</text>
          </view>
          
          <view class="order-amount">
            <text class="amount-label">金额</text>
            <text class="amount-value">¥{{ order.amount.toFixed(2) }}</text>
          </view>
        </view>
        
        <!-- 第三行：支付状态、订单时间和详情按钮 -->
        <view class="order-row row3">
          <view :class="['pay-tag', order.payStatusClass]">{{ order.payStatusText }}</view>
          <text class="order-time">{{ order.createTime }}</text>
          <button class="detail-btn" @click="viewOrderDetail(order)">详情</button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredOrders.length === 0 && !isLoading">
        <text class="empty-icon">📋</text>
        <text class="empty-text">暂无符合条件的订单</text>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading-state" v-if="isLoading">
        <view class="spinner"></view>
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 接单类型下拉选项（与statusText值保持一致）
      receiveTypes: ['服务中接单', '已完成接单', '已退回接单'],
      // 当前选中的接单类型索引
      currentReceiveTypeIndex: 0,
      // 订单数据
      orders: [],
      // 加载状态
      isLoading: true,
      // 接单相关图片列表
      receiveImages: [
        '/static/images/receives/ac-repair.jpg',
        '/static/images/receives/fridge-repair.jpg',
        '/static/images/receives/washing-machine.jpg',
        '/static/images/receives/tv-repair.jpg',
        '/static/images/receives/oven-repair.jpg'
      ],
      // 接单名称列表
      receiveNames: [
        '空调维修保养接单',
        '冰箱故障检测与维修接单',
        '洗衣机清洗与维修接单',
        '电视安装调试接单',
        '油烟机清洗接单',
        '热水器安装维修接单',
        '微波炉维修接单'
      ],
      // 接单型号列表
      receiveModels: [
        '格力 KFR-35GW/(35592)FNhAa-A1',
        '海尔 BCD-216STPA',
        '西门子 XQG80-WM12L2680W',
        '三星 UA55RU7520JXXZ',
        '老板 CXW-200-26A5S',
        '美的 F6030-JG5(HEY)',
        '格兰仕 G80F23CN3XL-R6K(R4)'
      ]
    };
  },
  computed: {
    // 根据选中的接单类型过滤订单
    filteredOrders() {
      // 接单类型索引对应订单状态：0→服务中(1)、1→已完成(2)、2→已退回(3)
      const currentStatus = this.currentReceiveTypeIndex + 1;
      return this.orders.filter(order => order.status === currentStatus);
    }
  },
  onShow() {
    // 页面显示时加载接单相关订单数据
    this.loadReceiveOrders();
  },
  methods: {
    // 切换接单类型
    onReceiveTypeChange(e) {
      const newIndex = e.detail.value;
      if (this.currentReceiveTypeIndex !== newIndex) {
        this.currentReceiveTypeIndex = newIndex;
        this.isLoading = true;
        // 模拟切换类型重新加载数据
        setTimeout(() => {
          this.loadReceiveOrders();
        }, 500);
      }
    },
    
    // 加载接单相关订单数据
    loadReceiveOrders() {
      this.isLoading = true;
      // 模拟API请求
      setTimeout(() => {
        const mockOrders = [];
        const currentStatus = this.currentReceiveTypeIndex + 1;
        // 获取与接单类型匹配的statusText（核心修改：状态文本改为接单类型值）
        const statusConfig = this.getStatusConfig(currentStatus);
        
        // 生成5-10条模拟接单订单
        const count = Math.floor(Math.random() * 6) + 5;
        for (let i = 0; i < count; i++) {
          const isPaid = Math.random() > 0.3;
          // 随机选择接单图片、名称、型号
          const imageIndex = Math.floor(Math.random() * this.receiveImages.length);
          const receiveIndex = Math.floor(Math.random() * this.receiveNames.length);
          
          mockOrders.push({
            id: i + 1,
            orderNo: `ORD${new Date().getFullYear()}${Math.floor(Math.random() * 1000000).toString().padStart(6, '0')}`,
            status: currentStatus,
            // statusText已改为“服务中接单/已完成接单/已退回接单”（与接单类型一致）
            statusText: statusConfig.text,
            statusClass: statusConfig.class,
            payStatus: isPaid ? 1 : 0,
            payStatusText: isPaid ? '已支付' : '未支付',
            payStatusClass: isPaid ? 'paid' : 'unpaid',
            amount: Math.floor(Math.random() * 900) + 100, // 金额逻辑不变
            receivePerson: this.getRandomName(), // 接单人员
            phone: `13${Math.floor(Math.random() * 100000000).toString().padStart(8, '0')}`,
            createTime: this.getRandomDate(),
            receiveName: this.receiveNames[receiveIndex], // 接单名称
            receiveModel: this.receiveModels[receiveIndex], // 接单型号
            productImage: this.receiveImages[imageIndex] // 接单图片
          });
        }
        
        this.orders = mockOrders;
        this.isLoading = false;
      }, 800);
    },
    
    // 核心修改：更新statusConfig，让statusText值与接单类型完全匹配
    getStatusConfig(status) {
      switch (status) {
        case 1: // 对应“服务中接单”类型
          return { text: '服务中接单', class: 'processing' }; 
        case 2: // 对应“已完成接单”类型
          return { text: '已完成接单', class: 'completed' }; 
        case 3: // 对应“已退回接单”类型
          return { text: '已退回接单', class: 'returned' }; 
        default:
          return { text: '未知接单状态', class: 'unknown' };
      }
    },
    
    // 生成随机接单人员姓名
    getRandomName() {
      const lastNames = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '周', '吴'];
      const firstNames = ['伟', '芳', '娜', '秀英', '敏', '静', '强', '磊', '军', '洋'];
      return lastNames[Math.floor(Math.random() * lastNames.length)] + 
             firstNames[Math.floor(Math.random() * firstNames.length)];
    },
    
    // 生成随机日期
    getRandomDate() {
      const date = new Date();
      const days = Math.floor(Math.random() * 30);
      date.setDate(date.getDate() - days);
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    
    // 查看接单订单详情
    viewOrderDetail(order) {
      uni.navigateTo({
        url: `/pages/orderDetail/index?orderNo=${order.orderNo}&receiveName=${order.receiveName}&statusText=${order.statusText}` // 携带接单状态文本参数
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

/* 页面标题 */
.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  padding: 30rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

/* 接单类型选择器 */
.select-container {
  padding: 20rpx 24rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.select-wrapper {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 60rpx;
}

.select-label {
  font-size: 26rpx;
  color: #333;
  margin-right: 16rpx;
  white-space: nowrap;
}

.picker-select {
  flex: 1;
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  color: #333;
  height: 100%;
}

.select-icon {
  color: #999;
}

/* 订单列表 */
.order-list {
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 订单卡片（cellItem） */
.order-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 订单行通用样式 */
.order-row {
  display: flex;
  width: 100%;
  margin-bottom: 16rpx;
  align-items: center;
}

.order-row:last-child {
  margin-bottom: 0;
}

/* 第一行：订单号和接单状态 */
.row1 {
  justify-content: space-between;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #f5f5f5;
}

.order-no {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
}

/* 第二行：图片、接单信息和金额 */
.row2 {
  align-items: center;
  gap: 16rpx;
  padding: 10rpx 0;
}

.product-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.product-image image {
  width: 100%;
  height: 100%;
}

/* 接单信息容器 */
.receive-info {
  flex: 1;
  min-width: 0;
}

/* 接单名称 */
.receive-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-bottom: 6rpx;
}

/* 接单型号 */
.receive-model {
  font-size: 22rpx;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 金额区域 */
.order-amount {
  flex-shrink: 0;
  text-align: right;
  min-width: 120rpx;
}

.amount-label {
  font-size: 22rpx;
  color: #666;
  display: block;
}

.amount-value {
  font-size: 26rpx;
  color: #f5222d;
  font-weight: 600;
}

/* 第三行：支付状态、时间、详情按钮 */
.row3 {
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 1px solid #f5f5f5;
}

.order-time {
  font-size: 22rpx;
  color: #666;
  margin: 0 10rpx;
  flex: 1;
  text-align: center;
}

/* 接单状态标签（样式不变，文本已改为接单类型值） */
.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  color: white;
  white-space: nowrap; /* 确保“服务中接单”等长文本不换行 */
}

.status-tag.processing {
  background-color: #1890ff;
}

.status-tag.completed {
  background-color: #52c41a;
}

.status-tag.returned {
  background-color: #fa8c16;
}

.status-tag.unknown {
  background-color: #999;
}

/* 支付状态标签 */
.pay-tag {
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  font-size: 22rpx;
  white-space: nowrap;
}

.pay-tag.paid {
  background-color: #f6ffed;
  color: #52c41a;
}

.pay-tag.unpaid {
  background-color: #fff1f0;
  color: #f5222d;
}

/* 详情按钮 */
.detail-btn {
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  height: auto;
  line-height: 1;
  white-space: nowrap;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150rpx 0;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
  color: #ddd;
}

</style>